<template>
    <div class="classMess">
        <div class="newsSectionTitle">
            <div class="classNameText">学习通知</div>
            <div class="classSelectBox">
                <el-select
                    v-model="value"
                    placeholder="请选择通知类型"
                    @change="changType"
                    size="small"
                    style="width:120px;margin-right:10px"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <div>
                    <div class="SelectboxBtn">
                        <div
                            class="SelectboxBtnItem SelectboxBtnItemIsActive"
                            @click="flagData(true)"
                        >
                            清除未读
                        </div>
                        <div
                            class="SelectboxBtnItem"
                            @click="removeInform(true)"
                        >
                            清空
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="classMessBox">
            <div class="MessTimeLine">
                <div class="MessTimeLineTitle">
                    <div class="MessTimeLineTitleLeft">
                        <div style="width: 125px;">时间/科目</div>
                        <div style="width: 100px;"></div>
                        <div style="width: 180px;">通知内容</div>
                    </div>
                    <div>操作</div>
                </div>
                <div class="messPadBox">
                    <div class="lineContent">
                        <el-timeline>
                            <el-timeline-item
                                v-for="(el, index) in listData"
                                :key="index"
                            >
                                <el-card>
                                    <div
                                        class="cardItemBox"
                                        :class="{
                                            isRead: el.push_state == '1'
                                        }"
                                        @click="toDeital(el, index)"
                                    >
                                        <div class="cardItemBox-left">
                                            <div style="width: 150px;">
                                                <div
                                                    class="cardItemBox-title"
                                                    style="margin-bottom: 8px;"
                                                >
                                                    {{
                                                        el.creat_time | getTime
                                                    }}
                                                </div>
                                                <div>{{ el.subject_name }}</div>
                                            </div>
                                            <div
                                                class="cardItemBox-title"
                                                style="width: 80px;"
                                            >
                                                <!-- {{ el.nicheng }} -->
                                            </div>
                                            <div style="width: 250px;">
                                                <div
                                                    class="cardItemBox-title textShenLue"
                                                    style="margin-bottom: 8px;"
                                                >
                                                    {{ el.push_text }}
                                                </div>
                                                <div
                                                    class="textShenLue"
                                                    v-html="
                                                        HTMLDecode(
                                                            el.push_content
                                                        )
                                                    "
                                                ></div>
                                            </div>
                                        </div>
                                        <div
                                            class="cardItemBox-right"
                                            @click.stop="
                                                removeInform(
                                                    false,
                                                    el.notice_push_id,
                                                    index
                                                )
                                            "
                                        >
                                            删除
                                        </div>
                                    </div>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                        <div
                            class="getMore"
                            v-if="listData.length < total"
                            @click="getMore"
                        >
                            -- 点击加载更多 --
                        </div>
                        <div class="noMore" v-else>-- 没有更多通知啦~ --</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getNoticeLists,
    delNoticeLists,
    saveNoticeRead
} from "@/api/noticeLists/noticeLists";
import { getFormatTime } from "@/utils/timeUtils";
export default {
    data() {
        return {
            options: [
                {
                    value: "0",
                    label: "全部"
                },
                {
                    value: "1",
                    label: "同步"
                },
                {
                    value: "2",
                    label: "趣练"
                },
                {
                    value: "3",
                    label: "自评"
                },
                {
                    value: "4",
                    label: "测验"
                },
                {
                    value: "5",
                    label: "智测"
                },
                {
                    value: "6",
                    label: "自测"
                },
                {
                    value: "7",
                    label: "班级"
                },
                {
                    value: "8",
                    label: "名课"
                },
                {
                    value: "9",
                    label: "班家通"
                },
                {
                    value: "10",
                    label: "随堂练习"
                },
                {
                    value: "11",
                    label: "课前作业"
                },
                {
                    value: "12",
                    label: "课后作业"
                },
                {
                    value: "13",
                    label: "课前预习"
                },
                {
                    value: "14",
                    label: "老师群发通知"
                }
            ],
            value: "0", //选择通知类型
            page: 1,
            pagesize: 10,
            total: 0,
            listData: []
        };
    },
    created() {
        this.getList();
    },
    filters: {
        //时间格式
        getTime(val) {
            if (val != "") {
                return getFormatTime(val * 1000);
            }
        }
    },
    methods: {
        //首页通知列表：
        async getList() {
            var query = {
                page: this.page,
                pagesize: this.pagesize
            };
            if (this.value != "0") {
                query.push_type = this.value;
            }
            var list = await getNoticeLists(query);
            if (list.code == 200) {
                this.total = list.data.total;
                this.listData = list.data.data;
            } else {
                this.total = 0;
                this.listData = [];
                this.$message.error(list.msg);
            }
        },
        changType() {
            this.page = 1;
            this.getList();
        },
        //加载更多
        async getMore() {
            this.page++;
            var query = {
                page: this.page,
                pagesize: this.pagesize
            };
            if (this.value != "0") {
                query.push_type = this.value;
            }
            var list = await getNoticeLists(query);
            if (list.code == 200) {
                this.total = list.data.total;
                this.listData = this.listData.concat(list.data.data);
            }
        },
        //删除通知
        removeInform(clearAll, notice_push_id, index) {
            let msg = "确定清空所有消息？";
            if (!clearAll) {
                msg = "确定删除该条消息？";
            }
            this.$confirm(msg, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(async () => {
                    var query = {
                        notice_push_ids: clearAll
                            ? this.getAllNoticeID()
                            : notice_push_id
                    };
                    var list = await delNoticeLists(query);
                    if (list.code == 200) {
                        if (clearAll) {
                            this.listData = [];
                        } else {
                            this.listData.splice(index, 1);
                        }
                        this.$message({
                            type: "success",
                            customClass: "customClass",
                            message: "删除成功!"
                        });
                        this.changType();
                    }
                })
                .catch(() => {});
        },
        //标记已读
        async flagData(clearAll, notice_push_id, index) {
            var query = {
                notice_push_ids: clearAll
                    ? this.getAllNoticeID()
                    : notice_push_id
            };
            var list = await saveNoticeRead(query);
            if (list.code == 200) {
                if (clearAll) {
                    this.listData.forEach((el, i) => {
                        this.listData[i].push_state = 1;
                    });
                } else {
                    this.listData[index].push_state = 1;
                }
            }
        },
        getAllNoticeID() {
            var arr = [];
            this.listData.forEach(el => {
                arr.push(el.notice_push_id);
            });
            return arr.join(",");
        },
        //跳转处理,未完成
        toDeital(el, index) {
            console.log("跳转处理，未完成：", el, index);
            this.flagData(false, el.notice_push_id, index);
            this.flagData(false, el.notice_push_id, index);
            //判断是否跳转
            var push_type = el.push_type;
            if (
                push_type == 4 ||
                push_type == 10 ||
                push_type == 11 ||
                push_type == 12 ||
                push_type == 13
            ) {
                var URL = "";
                var query = {};
                if (push_type == 4) {
                    //测验
                    URL = "/test/classTest/index";
                    query = {
                        groupid: el.groupid,
                        type: 0
                    };
                } else if (push_type == 10) {
                    // 随堂练习
                    URL = "/work/classWork/index";
                    query = {
                        groupid: el.groupid,
                        type: 2
                    };
                } else if (push_type == 11) {
                    //课前作业
                    URL = "/work/classWork/index";
                    query = {
                        groupid: el.groupid,
                        type: 1
                    };
                } else if (push_type == 12) {
                    // 课后作业
                    URL = "/work/classWork/index";
                    query = {
                        groupid: el.groupid,
                        type: 3
                    };
                } else if (push_type == 13) {
                    // 课前预习
                    URL = "/work/classWork/index";
                    query = {
                        groupid: el.groupid,
                        type: 4
                    };
                }
                this.$router.push({
                    path: URL,
                    query
                });
            }
        },
        //html标签被转义处理
        HTMLDecode(text) {
            var html;
            if (text) {
                html = text.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
            }
            return html;
        }
    }
};
</script>

<style scoped lang="scss">
.classMess {
    height: 403px;
    width: calc(100% - 429px);
    border-radius: 8px;
    background: #ffffff;

    .newsSectionTitle {
        height: 73px;
        line-height: 73px;
        background: #ffffff;
        border-radius: 8px 8px 0px 0px;
        padding: 0 27px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;

        .classNameText {
            font-size: 22px;
            font-weight: 600;
            color: #2d3440;
            cursor: pointer;
        }

        .classSelectBox {
            // width: 320px;
            display: flex;
            // justify-content: space-between;
            align-items: center;

            .SelectboxBtn {
                width: 168px;
                height: 42px;
                background: #eceff7;
                border-radius: 24px;
                padding: 5px;
                box-sizing: border-box;
                display: flex;

                .SelectboxBtnItem {
                    width: 74px;
                    height: 32px;
                    font-size: 14px;
                    line-height: 32px;
                    text-align: center;
                    color: #9fa3b0;
                    cursor: pointer;
                    &:hover {
                        color: #018854;
                    }
                }

                .SelectboxBtnItemIsActive {
                    background: #ffffff;
                    border-radius: 16px;
                    color: #018854;
                    &:hover {
                        background: #d4d4d4;
                    }
                }
            }
        }
    }

    .classMessBox {
        padding: 0px 25px 15px 25px;
        width: 100%;
        box-sizing: border-box;

        .MessTimeLine {
            height: 299px;
            background: #eceff7;
            border-radius: 8px;
            overflow: hidden;

            .MessTimeLineTitle {
                width: 100%;
                height: 46px;
                line-height: 46px;
                font-size: 14px;
                font-weight: 500;
                color: #2c323f;
                padding: 0 80px;
                box-sizing: border-box;
                border-bottom: 1px solid #dadfe6;
                display: flex;
                justify-content: space-between;

                .MessTimeLineTitleLeft {
                    display: flex;
                    align-items: center;
                }
            }

            .messPadBox {
                width: 100%;
                height: 250px;
                padding: 10px 20px 10px 0;
                box-sizing: border-box;

                .lineContent {
                    width: 100%;
                    height: 230px;
                    overflow: auto;
                    padding: 20px;
                    box-sizing: border-box;

                    &::-webkit-scrollbar-track-piece {
                        background-color: #ffffff;
                    }
                    &::-webkit-scrollbar {
                        width: 6px;
                        height: 6px;
                    }
                    &::-webkit-scrollbar-thumb {
                        background-color: #9fa3b0;
                        background-clip: padding-box;
                        min-height: 28px;
                        border-radius: 5px;
                    }
                    &::-webkit-scrollbar-thumb:hover {
                        background-color: #bbb;
                    }

                    .cardItemBox {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        cursor: pointer;
                    }

                    .cardItemBox-title {
                        color: #2c323f;
                        font-weight: 600;
                    }

                    .textShenLue {
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }

                    .cardItemBox-left {
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                        color: #9fa3b0;
                    }

                    .cardItemBox-right {
                        width: 57px;
                        height: 32px;
                        line-height: 32px;
                        text-align: center;
                        border-radius: 14px;
                        background-color: #018854;
                        color: #ffffff;
                        cursor: pointer;
                    }
                }

                .getMore {
                    width: 100%;
                    text-align: center;
                    cursor: pointer;
                    &:hover {
                        color: rgb(20, 102, 255);
                    }
                }

                .noMore {
                    width: 100%;
                    text-align: center;
                }
            }
        }
    }
}

// 已读
.isRead {
    opacity: 0.7;
}
</style>
